

<template>
  <view class="Mall4j">
    <!-- 分销员等级 -->
    <!-- 头部等级展示 -->
    <view class="top-wrapper">
      <view class="toplevelshow">
        <view class="level-txt">{{ levelName }}</view>

        <view class="level-progress">
          <!-- <view :class="(wxs.indexof(index+1)) + ' ' + (level == index ? 'current-level' : '') + ' level-block'" v-for="(item, index) in levelInfo" :key="index" :data-index="index" @tap="clinkLevel"> -->
          <view v-for="(item, index) in levelInfo" :key="index" :class="(level == index ? 'current-level' : '') + ' level-block'" :data-index="index" @tap="clinkLevel">
            <view :class="'square-block ' + (clickLevel == index ? 'current-bg' : '')" />
            <view :class="'level-block-txt ' + (clickLevel == index ? 'current-color' : '')">{{ item.name }}</view>
          </view>
          <view class="line" />
        </view>
      </view>

    </view>

    <!-- 等级规则 -->
    <view class="rules-wrapper">
      <view class="riles-title">
        <view class="horizontal" />
        <view class="riles-title-txt">{{ i18n.hierarchicalRules }}</view>
        <view class="horizontal" />
      </view>

      <view v-for="(rank, index) in levelInfo" :key="index" :class="'introduction-rules ' + (clickLevel == index ? 'current-rules':'')">
        <view class="intro-level-tit">
          <view class="salesman">{{ rank.name }}</view>
        </view>
        <view class="intron-rule">
          <view class="rule-desc-tit">
            <view class="intro-icon">
              <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/inviolable-rights.png" />
            </view>
            <view class="intro-title">{{ i18n.introductionUpgradeRules }}</view>
          </view>

          <view class="condition-box">
            <view class="condition">
              <view v-if="rank.levelSetConditionsSwitch.addupAmount" class="intro-detailed">
                <view class="triangle" />{{ i18n.upgradeRules1 }}<text>￥{{ wxs.toPrice(rank.distributionLevelConditionDataVO.addupAmount) }}</text>
              </view>
              <view v-if="rank.levelSetConditionsSwitch.boundCustomers" class="intro-detailed">
                <view class="triangle" />{{ i18n.upgradeRules2 }}<text>{{ rank.distributionLevelConditionDataVO.boundCustomers }}</text>{{ i18n.people }}
              </view>
              <view v-if="rank.levelSetConditionsSwitch.invitedVeeker" class="intro-detailed">
                <view class="triangle" />{{ i18n.upgradeRules3 }}<text>{{ rank.distributionLevelConditionDataVO.invitedVeeker }}</text>{{ i18n.people }}
              </view>
              <view v-if="rank.levelSetConditionsSwitch.invitedCustomers" class="intro-detailed">
                <view class="triangle" />{{ i18n.upgradeRules4 }}<text>{{ rank.distributionLevelConditionDataVO.invitedCustomers }}</text>{{ i18n.people }}
              </view>
              <view v-if="rank.levelSetConditionsSwitch.payNumber" class="intro-detailed">
                <view class="triangle" />{{ i18n.upgradeRules5 }}<text>{{ rank.distributionLevelConditionDataVO.payNumber }}</text>{{ i18n.piecesBi }}
              </view>
              <view v-if="rank.levelSetConditionsSwitch.sumOfConsumption" class="intro-detailed">
                <view class="triangle" />{{ i18n.upgradeRules6 }}<text>￥{{ wxs.toPrice(rank.distributionLevelConditionDataVO.sumOfConsumption) }}</text>
              </view>
              <view v-if="rank.levelSetConditionsSwitch.successOrderNumber" class="intro-detailed">
                <view class="triangle" />{{ i18n.upgradeRules7 }}<text>{{ rank.distributionLevelConditionDataVO.successOrderNumber }}</text>{{ i18n.piecesBi }}
              </view>
              <view v-if="rank.levelSetConditionsSwitch.successTradingVolume" class="intro-detailed">
                <view class="triangle" />{{ i18n.upgradeRules8 }}<text>￥{{ wxs.toPrice(rank.distributionLevelConditionDataVO.successTradingVolume) }}</text>
              </view>
            </view>
          </view>

          <view v-if="rank.levelSetConditionsSwitch.commodity && rank.distributionLevelConditionDataVO.commodity.length" class="buyprod">
            <view class="buy-tit">
              <view class="triangle" />{{ i18n.purchaseDesignatedGoods }}
            </view>
            <view v-for="(prod, index2) in rank.distributionLevelConditionDataVO.commodity" :key="index2" class="prod-msg" :data-prodid="prod.prodId" @tap="toProdPage">
              <view class="prod-img">
                <image :src="prod.pic" />
              </view>
              <view class="prod-name">
                <view class="prod-name-txt">{{ prod.prodName }}</view>
              </view>
            </view>
          </view>
        </view>

      </view>

    </view>

    <!-- 立即升级 -->
    <view v-if="clickLevel == level+1" class="upgrade-now" @tap="applicationUpgrade">
      <view class="upgrade">{{ i18n.upgradeImmediately }}</view>
    </view>
  </view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
// 查看等级
// pages/salesman-level/salesman-level.js
var http = require("../../utils/http.js");

export default {
  data () {
    return {
      levelInfo: [],
      //等级
      clickLevel: 0,
      // 用户点击的等级
      levelName: '',
      // 用户当前等级名称
      level: 0,
      // 用户当前等级
      shopId: 1,
      currentColor: "",
      currentbg: ""
    };
  },

  components: {},
  props: {},

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getLevelInfo(); // this.setData ({
    //   currentLev: this.data.currentLevel
    // })
    // console.log(this.data.currentLev)
    // console.log(this.data.currentLevel)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    /**
     * 查看等级
     */
    getLevelInfo: function () {
      var params = {
        url: '/p/distribution/level/page',
        method: 'GET',
        data: {
          shopId: 1
        },
        callBack: res => {
          this.setData({
            levelInfo: res
          });

          if (res.length) {
            res.forEach(levelInfo => {
              if (levelInfo.isCurrentLevel) {
                this.setData({
                  clickLevel: levelInfo.level - 1,
                  level: levelInfo.level - 1,
                  levelName: levelInfo.name
                });
              }
            });
          }
        }
      };
      http.request(params);
    },

    /**
     * 申请升级
     */
    applicationUpgrade: function () {
      var params = {
        url: '/p/distribution/level/upgrade',
        method: 'POST',
        data: 1,
        callBack: res => {
          uni.showToast({
            title: this.i18n.upgradeSuccessful,
            icon: 'success'
          });
          setTimeout(() => this.getLevelInfo(), 1000);
        }
      };
      http.request(params);
    },

    /**
     * 跳转到商品详情
     */
    toProdPage: function (e) {
      var prodid = e.currentTarget.dataset.prodid;

      if (prodid) {
        // uni.navigateTo({
        //   url: '/pages/prod/prod?prodid=' + prodid
        // });
        this.$Router.push({ path: '/pages/prod/prod', query: { prodid: prodid } })
      }
    },

    /**
     * 点击切换当前等级规则
     */
    clinkLevel: function (e) {
      this.setData({
        clickLevel: e.currentTarget.dataset.index,
        currentColor: 'current-color',
        currentbg: 'current-bg'
      });
      console.log(e.currentTarget.dataset.index);
    }
  }
};
</script>
<style>
@import "./salesman-level.css";
</style>
